<template>
	<view class="">
		<view class="container">
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index"
					@click="$pageTo(`/pages/user/order/billData?id=${item.id}`)">
					<view class="t-s u-flex u-col-center u-row-between">
						<view class="t">
							报价编号：{{item.id}}
						</view>
						<view class="s" :class="{on:item.status == 2}">
							{{slist[item.status]}}
						</view>
					</view>
					<view class="p">
						<view class="">
							{{item.quotation.game_zone_name}} | 角色ID：{{item.quotation.account}}
						</view>
						<view class="flex" style="margin-top: 8rpx;">
							<view class="flex  sss">
								<image src="/static/wx.png" mode=""></image>
								{{item.quotation.wechat}}
							</view>
							<view class="flex sss">
								<image src="/static/sj.png" mode=""></image>
								{{item.quotation.phone}}
							</view>
						</view>
					</view>
					<view class="money u-flex u-col-center">
					<!-- 	<view class="i">
							商人币：<text>{{item.coin}}</text>
						</view> -->
						<view class="i">
							上架天数：<text>{{item.upday}}</text>天
						</view>
					</view>
					<view class="time u-flex u-col-center u-row-between">
						<text>创建时间：{{item.pay_time|formatISODate}}</text>
						<text v-if="item.refund_status == 1">已退款</text>
					</view>
					<view class="btns u-flex u-col-center u-row-right" v-if="item.status == 2 ">
						<view class="btn" @click.stop="open(item)" v-if="item.status == 2 && item.quotation.priceMode ==2">
							改价
						</view>
						<view class="btn" @click.stop="down(item.quotation.id)">
							下架
						</view>
					</view>
				</view>
			</view>

		</view>
		<uni-popup ref="popup" type="center">
			<view class="m-pop2">
				<uni-icons type="closeempty" size="22" color="#AEAEAE" class="icons" @click="close"></uni-icons>
				<view class="t">
					商品改价
				</view>
				<view class="m-item u-flex u-col-center u-row-between">
					<view class="l">
						原价<text>{{data.quotation.priceUnit == 0?'(MHB)':'(元)'}}</text>
					</view>
					<view class="r price" v-if="data.quotation && data.quotation.price">
						<text class="p"
							:class="{'p1':getPriceLength(data.quotation.price)<6,'p2':getPriceLength(data.quotation.price)==6,'p3':getPriceLength(data.quotation.price)==7,'p4':getPriceLength(data.quotation.price)==8,'p5':getPriceLength(data.quotation.price)>=9,}">{{$numToLocaleString(data.quotation.price)}}</text>

						<text class="y">{{data.quotation.priceUnit == 0?'MHB':'元'}}</text>
					</view>
				</view>
				<view class="m-item u-flex u-col-center u-row-between">
					<view class="l">
						改价<text>{{data.quotation.priceUnit == 0?'(MHB)':'(元)'}}</text>
					</view>
					<view class="r">
						<input maxlength="9" v-model="number" type="number" placeholder="请输入"
							placeholder-style="font-size: 28rpx;color: #D1D1D6;" />
						<view class="big" v-if="number">
							{{ number | numberToChinese(data.quotation.priceUnit) }}
						</view>
					</view>
				</view>
				<view class="btns u-flex u-col-center u-row-between">
					<view class="btn btn1" @click="close">
						取消
					</view>
					<view class="btn btn2" @click="quotationPrice">
						确认改价
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getUpList,
		downQuotationList,
		infoupDetail,
		quotationPrice
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				index: 3,
				show: false,
				number: '',
				id: "",
				list: [],
				page: 1,
				totalpage: 1,
				slist: ['', '待发布', '发布中', '已下架', ],
				data: {}
			}
		},
		onLoad(o) {
			this.id = o.id
			this.getlist()
		},
		onReachBottom() {
			if (this.page < this.totalpage) {
				this.page++
				this.getlist()
			}
		},
		computed: {
			getPriceLength() {
				return (data) => {
					if (!data) return 1

					function getDigitCount(num) {
						if (num === 0) return 1;

						num = Math.abs(parseInt(num)); // 忽略小数部分，只处理整数
						return Math.floor(Math.log10(num)) + 1;
					}
					let l = getDigitCount(data)
					return l

				}
			}
		},
		methods: {
			down(id) {
				this.$modal.confirm('是否要下架当前报价信息？', '下架提示').then(() => {
						return downQuotationList(id)
					}).then(() => {
						this.$modal.msg('下架成功')
						this.page = 1
						this.list = []
						this.getlist()
					})
					.catch(() => {})
			},
			quotationPrice() {
				if (!this.number) {
					this.$modal.msg('请输入金额')
					return
				}
				if (this.number.length > 9) {
					this.$modal.msg('金额过大')
					return
				}
				quotationPrice({
					id: this.data.quotation.id,
					price: parseInt(this.number),
					game_zone_name: this.data.quotation.game_zone_name,
					account: this.data.quotation.account,
					wechat: this.data.quotation.wechat
				}).then(res => {
					if (res.code == 200) {
						this.$modal.msg('修改成功')
						this.close()
						this.number = ''
						this.list = []
						this.page = 1
						this.getlist()
					}
				})
			},
			open(data) {
				infoupDetail(data.id).then(res => {
					if (res.code == 200) {
						this.data = res.data
						this.$refs.popup.open()
					}
				})
			},
			getlist() {
				getUpList({
					quotation_id: this.id,
					page: this.page
				}).then(res => {
					if (res.code == 200) {
						res.data.list.forEach(i => i.quotation.price = 100032)
						this.list = [...this.list, ...res.data.list]
						this.totalpage = res.data.page
					}
				})
			},
			close() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="less" scoped>
	@color: #FF6F07;

	.m-pop2 {
		width: 620rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		flex-direction: column;
		box-sizing: border-box;
		padding: 40rpx 30rpx 40rpx;
		background: #fff;
		border-radius: 20rpx;

		.icons {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		.t {
			line-height: 44rpx;
			height: 44rpx;
			font-size: 40rpx;
			color: #000000;
			text-align: center;
			font-weight: 600;
		}

		.m-item {
			width: 100%;
			padding: 10rpx 0;
			margin-top: 20rpx;

			.l {
				font-size: 32rpx;
				color: #000000;
				width: 160rpx;

				text {
					font-size: 20rpx;
					margin-left: 5rpx;
				}
			}

			.r {
				flex: 1;
				width: 1rpx;
				text-align: right;
				margin-left: 20rpx;
				position: relative;

				input {
					width: 100%;
					height: 68rpx;
					background: #FFFFFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #D1D1D6;
					line-height: 68px;
					font-size: 28rpx;
					color: #11192D;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.big {
					position: absolute;
					top: 70rpx;
					right: 0;
					line-height: 40rpx;
					height: 40rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #979797;
					text-align: right;
				}
			}

			.price {
				height: 50rpx;
				line-height: 50rpx;

				.p {
					font-family: "DIN";
					font-weight: bold;
					font-size: 36rpx;
					text-align: left;

				}

				.p5 {
					color: #FF70A4;
				}

				.p4 {
					color: #840FFB;
				}

				.p3 {
					color: #FE1515;
				}

				.p2 {
					color: #1EC742;
				}

				.p1 {
					color: #11192D;
				}

				.y {
					color: #979797;
					font-size: 20rpx;
					margin-left: 10rpx;
					font-weight: 400;
					height: 50rpx;
					line-height: 50rpx;
				}
			}
		}

		.p {
			margin-top: 60rpx;
			line-height: 44rpx;
			height: 44rpx;
			font-size: 32rpx;
			color: #000000;
			text-align: center;

			text {
				color: @color;
			}
		}

		.btns {
			width: 100%;
			margin-top: 50rpx;

			.btn {
				text-align: center;
				font-size: 32rpx;
				width: calc(50% - 10rpx);
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
			}

			.btn1 {

				background: #F9F9F9;
				color: #D1CDCD;
			}

			.btn2 {
				color: #fff;
				background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);

			}
		}
	}

	.container {
		padding: 30rpx;

		.list {
			.item {
				padding: 30rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin-bottom: 20rpx;

				.f-s {
					line-height: 30rpx;
					margin-top: 20rpx;
					height: 30rpx;
					font-size: 20rpx;
					color: #979797;
					text-align: right;
				}

				.btns {
					margin-top: 20rpx;

					.btn {
						width: 160rpx;
						height: 68rpx;
						line-height: 68rpx;
						color: #979797;
						font-size: 28rpx;
						text-align: center;
						margin-left: 20rpx;
						background: #FFFFFF;
						border-radius: 12rpx;
						border: 1px solid #D5D5D5;
					}
				}

				.t-s {
					line-height: 40rpx;
					height: 40rpx;

					.t {
						flex: 1;
						width: 1rpx;
						font-size: 28rpx;
						color: #11192D;
					}

					.s {
						color: #979797;
						font-size: 28rpx;
					}

					.on {
						color: @color;
					}
				}

				.p {
					margin-top: 10rpx;
					width: 630rpx;
					height: 80rpx;
					background: #F9F9F9;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 8rpx 20rpx;
					box-sizing: border-box;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #979797;
					.sss{
						image{
							width: 24rpx;
							height: 24rpx;
							margin-right: 6rpx;
						}
						margin-right: 30rpx;
					}
				}

				.money {
					height: 60rpx;
					line-height: 60rpx;

					.i {
						font-size: 20rpx;
						color: #979797;
						margin-right: 70rpx;

						text {
							color: @color;
							font-family: "DIN";
							font-weight: bold;
							padding: 0 10rpx;
							font-size: 28rpx;
						}
					}
				}

				.time {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 20rpx;
					color: #979797;
					text-align: left;
				}
			}
		}
	}
</style>